@import "fn";
html,body,h1,h2,h3,p,br,ul,li{
    margin: 0;
    padding: 0;
}
@font-face {
  font-family: 'iconfont';
  src: url('http://at.alicdn.com/t/font_1477190617_0521557.eot'); /* IE9*/
  src: url('http://at.alicdn.com/t/font_1477190617_0521557.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('http://at.alicdn.com/t/font_1477190617_0521557.woff') format('woff'), /* chrome、firefox */
  url('http://at.alicdn.com/t/font_1477190617_0521557.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('http://at.alicdn.com/t/font_1477190617_0521557.svg#iconfont') format('svg'); /* iOS 4.1- */
}
                    
                    
@ra-w:2rem;
@w:100%;
li{
    list-style: none;
}
.iconfont{
    font-family: "iconfont"!important;
}
@headerbg:#06c1ae;
html{
    font-size: 20px;
}
body{
    font-size: 0.6rem;
}
a{
    text-decoration: none;
    
}

header{
    width: 100%;
    height: 2.5rem;
    background-color:#06c1ae;
    border-bottom:1px solid #21897d;
    div{
        float: left;
    }
    .left{
        width: 5%;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        div{
            float: left;
        }
        
        a{
            color: white;
            width: 2rem;
            float: left;
            text-align: right;
            font-size: 0.8rem;
        }
    }
    .center{
        width:90%;
        overflow: hidden;
        height: 1.5rem;
        margin: 0.5rem 0;
        box-sizing: border-box;
        a{
            width: 98%;
            height: 100%;
            padding-left: 0.6rem;
            background-color: #05A494;
            line-height: 1.5rem;
            display: inline-block;
           font-size: 0.8rem;
           color: white;
           border-radius: 0.2rem; 
           .text{
               width: 53rem;
               display: inline-block;
               height: 1.5rem;
               line-height: 1.5rem;
               font-size: 0.6rem;
               position: relative;
               top: -0.1rem;
               opacity: 0.7;
           }
        }
    }
    .right{
        width: 5%;
        height: 2.5rem;
        text-align: center;
        color: white;
        span{
            font: 0.8rem/1.5  "微软雅黑";
        }
    }
}
.xiala{
    width: 0.9rem;
    height: 1rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    text-align: left;
    top: 0.6rem;
    span{
        text-align: left;
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
        color: white;
        display: inline-block;
        position: absolute;
        left: 0;
        top: -1.3rem;
    }
}
nav{
    width: 100%;
    height: 11rem;
    display: flex;
    flex-flow: row wrap;
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    .swiper-slide {
        text-align: center;
        background: #fff;
        display: flex;
        flex-flow: row wrap;
        li{
            width: 20%;
            height: 5rem;
            list-style: none;
            box-sizing: border-box;
            text-align: center;
            a{
                display: block;
                box-sizing: border-box;
                padding: 1rem 0;
                width: 100%;
                color: black;
                span{
                    display: inline-block;
                    width: 100%;
                    color: #666;
                }
                .iconfont{
                    width: @ra-w;
                    font: 1.5rem/@ra-w "iconfont";
                    display: inline-block;
                    color: white;
                    border-radius: 50%;
                    margin-bottom: 0.5rem;
                }
                .li1{
                    .fn-iconfont(orange)
                }
                .li2{
                    .fn-iconfont(red)
                }
                .li3{
                    .fn-iconfont(#8A90FA)
                }
                .li4{
                    .fn-iconfont(yellow)
                }
                .li5{
                    .fn-iconfont(orange)
                }
                .li6{
                    .fn-iconfont(yellow)
                }
                .li7{
                    .fn-iconfont(#4DC6EE)
                }
                .li8{
                    .fn-iconfont(pink)
                }
                .li9{
                    .fn-iconfont(orange)
                }
                .li10{
                    .fn-iconfont(#599EEC)
                }
            }
        }
    }
}
.content{
    width: 100%;
    height: 10rem;
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 0.5rem;
    a{
        text-align: center;
        display: block;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid #ccc;
        color: #666;
        b{
            font: 0.8rem/1.8 "微软雅黑";
            color:#55a40f ;
        }
        img{
            height: 50%;
        }
        span{
            display: inline-block;
        }
        .rColor{
            color: red;
        }
        .pColor{
            color: deeppink;
        }
        .oColor{
            color: orange;
        }
    }
    .left{
        float: left;
        width: @w/3;
        height: 100%;
    }
    .right{
        float: left;
        width: @w/3*2;
        height: 100%;
        div{
            width: 100%;
            height: 4.5rem;
            overflow: hidden;
        }
        .top{
            border-bottom: 1px solid #ccc;
        }
        .bottom{
            display: flex;
            flex-flow: row wrap;
            a{
                width: 50%;
            }
            .span-time{
                display: inline-block;
                width: 1rem;
                height: 1rem;
                border-radius: 0.2rem;
                background-color: #000;
                color: white;
                line-height: 1rem;
                margin-top: 0.3rem;
            }
        }
        .bright {
            border-right-width: 0;
        }
    }
}
section{
    padding-left: 1rem;
    color: #666;
    h2{
        border-bottom: 1px solid #ddd;
        font: 1rem/2 "微软雅黑";
    }
    h3{
        display: none;
        a{
            display: block;
            width: 100%;
            font: 0.8rem/2 simsun;
            color: #06c1ae;
            position:relative; 
            &:after{
                font-weight: 900;
                content: '>';
                position: absolute;
                right: 2%;
            }
        }
        border-bottom:2px solid #ddd;
    }
    li{
        width: 100%;
        height: 5rem;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        a{
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            color: #222;
            padding: 0.5rem 0.5rem 0 0;
            .left{
                float: left;
                width: 5rem;
                height: 100%;
                overflow:hidden;
              
            }
            .right{
                width: 89%;
                height: 100%;
                float: left;
                padding-left: 1%;
                p{
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p:nth-child(1){
                    font: 0.8rem/1.5 "微软雅黑";
                }
                p:nth-child(2){
                    font: 0.6rem/2 "微软雅黑";
                }
                p:nth-child(3){
                    color:#666;
                    .pri{
                        float: left;
                        .pri1{
                            font: 1rem/1.5 "微软雅黑";
                            margin-right: 0.3rem;
                            color: #06c1ae;
                        }
                    } 
                    .xiaoliang{
                        line-height: 1.5rem;
                        float: right;
                    }
                }
            }
            
        }
    }
}
.jiazai{
    .fn-clear();
    width: 100%;
    height: 7rem;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    img{
        height: 80%;
    }
}
.top.iconfont{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font: 1rem/2 "iconfont";
    color: white;
    text-align: center;
    background-color: #05A494;
    position: fixed;
    bottom: 5rem;
    display: none;
    right: 4rem;
    cursor: pointer;
}
footer{
    background-color: #f1f1f1;
    a{
        color: #06C1AE;
        display: inline-block;
    }
    .top{
        padding: 1rem;
        a{
            width:2rem;
            text-align: center;
            font: 0.8rem/2 "宋体";
            border: 1px solid #06C1AE;
            padding: 0 0.5rem;
            border-radius: 0.2rem;
        }
        span{
            float: right;
            font: 0.7rem/1.5 "微软雅黑";
        }
    }
    p:nth-of-type(2){
        text-align: center;
        line-height: 2rem;
    }
    p:first-of-type{
        width: 100%;
        overflow: hidden;
        a{
            float: left;
            text-align: center;
            width: 25%;
            box-sizing: border-box;
            border-right: 1px solid #4DC6EE;
        }
        .last{
            border-right: none;
        }
    }
    .mybottom{
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        position: relative;
        a{
            text-align: center;
            width: 20%;
            color: #666;
            line-height: 1rem;
            position: absolute;
            left: 45%;
            top: -25%;
            background-color: #f1f1f1;
        }
    }
}
@media(min-width:767px)and(max-width:1024px){
    section li a .right{
        width: 85%;
    }
}
@media(max-width:767px){
    header{
        .left{
            width: 17%;
        }
        .center{
            width: 70%;
            a{
                width: 95%;
            }
        }
        .right{
            width: 13%;
        }
    }
    section {
        li{
            a{
                .left{
                    width: 24%;
                }
                .right{
                    width: 75%;
                    p:nth-child(1){
                        font: 0.7rem/1.5 "微软雅黑";
                    }
                    p:nth-child(3) .pri .pri1{
                        font: 0.8rem/1.5 "微软雅黑";
                    }
                }
            }
        }
    }
    .iconfont.top{
        right: 2rem;
        bottom: 2rem;
    }
    .jiazai{
        height: 3rem;
        img{
            height: 80%;
        }
    }
    footer{
        .mybottom a{
            width: 60%;
            left: 20%;
        }
    } 
}
@media(min-width:375px)and(max-width:413px){
    
}
@media(max-width:374px){
    header{
        .left{
            a{
                width: 1.5rem;
                font: 0.7rem/2.5rem "微软雅黑";
            }
            
        }
        .right{
            span{
                font-size: 0.7rem;
            }
        }
    }
    nav li a .iconfont{
        width: 1.5rem;
        height: 1.5rrem;
        line-height: 1.5rem;
    }
    .content a b{
        font-size: 0.7rem;
    }
    .left{
        img{
            width: 100%;
        }
    }
    footer .top a{
        font: 0.7rem/1.5 "宋体";
    }
}
